<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

<script
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCrxmbr62tBd5dYO4X8timp7fSxq-rlQwA&sensor=false&libraries=visualization"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript" src="/js/icons.js"></script>


<script>
	jQuery(function() {		

		//latlng = new google.maps.LatLng(53.37674, -1.468016);
		latlng = new google.maps.LatLng(51.50851, -0.125487);	

		var mapOptions = {
			zoom : 5,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.SATELLITE
		};

		var map = new google.maps.Map(document.getElementById('map-canvas'),
				mapOptions);

		function addTweets(query) {

			map = new google.maps.Map(document.getElementById('map-canvas'),
					mapOptions);
				

			var geocoder = new google.maps.Geocoder();

			jQuery.getJSON('/twitterJSON.groovy', {
				userQuery : query
			}, function(data) {

				jQuery.each(data, function(key, val) {
					var text = val.text;
					var lat = val.lat;
					var lng = val.lng;
					var screenname = val.screenname;

					var TweetLatlng = new google.maps.LatLng(lat, lng);

					//console.log("key is " + key + " lat is : " + lat
					//	+ " lng is " + lng);

					var infoString = '<p style="color:blue;"> Text: ' + text
							+ '</p>';

					var infowindow = new google.maps.InfoWindow({
						content : infoString
					});

					var titleString = 'ScreenName:' + screenname;

					var marker = new google.maps.Marker({
						position : TweetLatlng,
						map : map,
						icon : tweetImage,
						title : titleString
					});

					google.maps.event.addListener(marker, 'click', function() {
						infowindow.open(map, marker);
					});
				});
			});
		}

		jQuery("#tweetQuery").change(
				function() {
					addTweets(jQuery("#tweetQuery").val());
					console.log("showTweets selected value "
							+ jQuery("#tweetQuery").val());
				});
	});
</script>

<style>
#map-canvas {
	width: 800px;
	height: 700px;
}

body {
	font-family: arial; /* Font */
	font-size: 12px; /* Font Size */
}
</style>

</head>
<body>
	<h1>Athena Tweets</h1>

	<p>Enter Twitter Query</p>

	<input title="enter twitter query" id="tweetQuery" autocomplete="on"
		type="text" " class="text" width="150" placeholder='twitter query'>

	<div id="map-canvas"></div>
	</div>
</body>
</html>